<template>
  <div :class="classObject">
    <el-upload :action="uploadAction"
               :headers="{ Authorization: getToken() }"
               :disabled="disabled"
               :data="uploadData"
               list-type="picture-card"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               :file-list="fileList"
               :pic-name-list="picNameList"
               :before-remove="beforeRemove"
               :on-success="successUp"
               :limit="maxSize">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<style lang="scss">
.close-delete .el-upload-list--picture-card .el-upload-list__item {
  & > .el-upload-list__item-actions .el-upload-list__item-delete {
    display: none;
  }
}
.close-upload .el-upload--picture-card {
  display: none;
}
.el-upload__input {
  display: none !important;
}
.lang-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 113px;
  height: 72px;
}
.lang-upload .el-upload--picture-card {
  width: 113px;
  height: 72px;
  background-color: #f5f5f5;
  & > i {
    position: relative;
    bottom: 30px;
  }
}
.short-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 79px;
  height: 79px;
}
.short-upload .el-upload--picture-card {
  width: 79px;
  height: 79px;
  background-color: #f5f5f5;
  & > i {
    position: relative;
    bottom: 30px;
  }
}
.small-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.small-upload .el-upload--picture-card {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  & > i {
    position: relative;
    bottom: 39px;
  }
}
</style>

<script>
import { devBaseURL, api, devBasePicURL } from '@/api'
import { HTTPSUCCESS } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      devBaseURL,
      dialogImageUrl: '',
      viewer: null,
      classObject: ''
    }
  },
  created() {
    this.buildClassObject()
  },
  watch: {
    fileList: {
      handler: function() {
        this.buildClassObject()
      }
    }
  },
  props: {
    uploadAction: {
      type: String,
      default: devBaseURL + api.UPLOAD_PICTURE
    },
    uploadData: {
      type: Object,
      default: () => { return { fileName: 'pic' } }
    },
    maxSize: {
      type: Number,
      default: 1
    },
    picNameList: {
      type: Array,
      default: () => { return [] }
    },
    uploadClass: {
      type: String,
      default: 'short-upload'
    },
    uploadType: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: () => { return [] }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  methods: {
    getToken,
    successUp(response, file, fileList) {
      if (response.error.code === HTTPSUCCESS) {
        this.$msg._message('上传成功', 'success')
        this.changeClass(fileList)
        this.picNameList.push(response.result)
        this.$emit('update:picNameList', this.picNameList)
      } else {
        this.$msg._message(response.msg, 'error')
      }
    },
    handleRemove(file, fileList) {
      if (!this.uploadType) {
        this.changeClass(fileList)
        const index = fileList.indexOf(file)
        this.picNameList.splice(index, 1)
        this.$emit('update:picNameList', this.picNameList)
      } else {
        return false
      }
    },
    handlePictureCardPreview(file) {
      this.$emit('showImg', file.url)
    },
    beforeRemove(file, fileList) {
      if (!this.uploadType) {
        return this.$confirm(`确定移除 ${file.name}？`)
      } else {
        return false
      }
    },
    changeClass(fileList) {
      const change = this.classObject
      if (fileList && fileList.length === this.maxSize) {
        this.classObject = change + ' close-upload'
      } else if (fileList && fileList.length < this.maxSize) {
        if (change.indexOf('close-upload') > 0) {
          this.classObject = change.substring(0, change.length - 13)
        } else {
          this.classObject = change
        }
      }
    },
    buildClassObject() {
      console.log(1, this.fileList)
      this.fileList.forEach(file => {
        if (file.url) {
          file.url = file.url.replace(/(\d{0,3}.){3}\d{0,3}:80/g, devBasePicURL)
        }
      })
      console.log(2, this.fileList)
      if (this.uploadType) {
        this.classObject = this.uploadClass + ' close-upload'
      } else {
        if (this.fileList.length === this.maxSize) {
          this.classObject = this.uploadClass + ' close-upload'
        } else {
          this.classObject = this.uploadClass
        }
      }
    }
  }
}
</script>
